<div class="heading" id="css">
    <h2>CSS, SCSS</h2>
</div>

<div class="section" id="css-indentation">
    <div class="col">
        <h3>缩进</h3>
        <p>使用soft tab（4个空格）。</p>
    </div>
    <div class="col">
        {% highlight css %}{% include css/indentation.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-semicolon">
    <div class="col">
        <h3>分号</h3>
        <p>每个属性声明末尾都要加分号。</p>
    </div>
    <div class="col">
        {% highlight css %}{% include css/semicolon.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-space">
    <div class="col">
        <h3>空格</h3>
        <p>以下几种情况不需要空格：</p>
        <ul>
            <li>属性名后</li>
            <li>多个规则的分隔符','前</li>
            <li><code>!important</code> '!'后</li>
            <li>属性值中'('后和')'前</li>
            <li>行末不要有多余的空格</li>
        </ul>
        <p>以下几种情况需要空格：</p>
        <ul>
            <li>属性值前</li>
            <li>选择器'>', '+', '~'前后</li>
            <li>'{'前</li>
            <li><code>!important</code> '!'前</li>
            <li><code>@else</code> 前后</li>
            <li>属性值中的','后</li>
            <li>注释'/*'后和'*/'前</li>
        </ul>
    </div>
    <div class="col">
        {% highlight css %}{% include css/space.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-blank-line">
    <div class="col">
        <h3>空行</h3>
        <p>以下几种情况需要空行：</p>
        <ul>
            <li>文件最后保留一个空行</li>
            <li>'}'后最好跟一个空行，包括scss中嵌套的规则</li>
            <li>属性之间需要适当的空行，具体见<a href="#css-declaration-order">属性声明顺序</a></li>
        </ul>
    </div>
    <div class="col">
        {% highlight css %}{% include css/blank_line.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-new-line">
    <div class="col">
        <h3>换行</h3>
        <p>以下几种情况不需要换行：</p>
        <ul>
            <li>'{'前</li>
        </ul>
        <p>以下几种情况需要换行：</p>
        <ul>
            <li>'{'后和'}'前</li>
            <li>每个属性独占一行</li>
            <li>多个规则的分隔符','后</li>
        </ul>
    </div>
    <div class="col">
        {% highlight css %}{% include css/new_line.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-comments">
    <div class="col">
        <h3>注释</h3>
        <p>注释统一用'/* */'（scss中也不要用'//'），具体参照右边的写法；</p>
        <p>缩进与下一行代码保持一致；</p>
        <p>可位于一个代码行的末尾，与代码间隔一个空格。</li>
    </div>
    <div class="col">
        {% highlight css %}{% include css/comments.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-quote-marks">
    <div class="col">
        <h3>引号</h3>
        <p>最外层统一使用双引号；</p>
        <p>url的内容要用引号；</p>
        <p>属性选择器中的属性值需要引号。</p>
    </div>
    <div class="col">
        {% highlight css %}{% include css/quote_marks.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-naming-rule">
    <div class="col">
        <h3>命名</h3>
        <ul>
            <li>类名使用小写字母，以中划线分隔</li>
            <li>id采用驼峰式命名</li>
            <li>scss中的变量、函数、混合、placeholder采用驼峰式命名</li>
        </ul>
    </div>
    <div class="col">
        {% highlight css %}{% include css/naming.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-declaration-order">
    <div class="col">
        <h3>属性声明顺序</h3>
        <p>相关的属性声明按右边的顺序做分组处理，组之间需要有一个空行。</p>
    </div>
    <div class="col">
        {% highlight css %}{% include css/declaration-order.css %}{% endhighlight %}
        {% highlight javascript %}{% include css/declaration-order.js %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-color">
    <div class="col">
        <h3>颜色</h3>
        <p>颜色16进制用小写字母；</p>
        <p>颜色16进制尽量用简写。</p>
    </div>
    <div class="col">
        {% highlight css %}{% include css/color.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-shorthand">
    <div class="col">
        <h3>属性简写</h3>
        <p>属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；</p>
        <p><code>margin</code> 和 <code>padding</code> 相反，需要使用简写；</p>
        <p>常见的属性简写包括：</p>
        <ul>
            <li><code>font</code></li>
            <li><code>background</code></li>
            <li><code>transition</code></li>
            <li><code>animation</code></li>
        </ul>
    </div>
    <div class="col">
        {% highlight css %}{% include css/shorthand.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-media-queries">
    <div class="col">
        <h3>媒体查询</h3>
        <p>尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。</p>
    </div>
    <div class="col">
        {% highlight css %}{% include css/media_queries.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-scss">
    <div class="col">
        <h3>SCSS相关</h3>
        <p>提交的代码中不要有 <code>@debug</code>；</p>
        <div>
            <p>声明顺序：</p>
            <ul>
                <li><code>@extend</code></li>
                <li>不包含 <code>@content</code> 的 <code>@include</code></li>
                <li>包含 <code>@content</code> 的 <code>@include</code></li>
                <li>自身属性</li>
                <li>嵌套规则</li>
            </ul>
        </div>
        <p><code>@import</code> 引入的文件不需要开头的'_'和结尾的'.scss'；</p>
        <p>嵌套最多不能超过5层；</p>
        <p><code>@extend</code> 中使用placeholder选择器；</p>
        <p>去掉不必要的父级引用符号'&'。</p>
    </div>
    <div class="col">
        {% highlight css %}{% include css/scss.css %}{% endhighlight %}
    </div>
</div>

<div class="section" id="css-miscellaneous">
    <div class="col">
        <h3>杂项</h3>
        <p>不允许有空的规则；</p>
        <p>元素选择器用小写字母；</p>
        <p>去掉小数点前面的0；</p>
        <p>去掉数字中不必要的小数点和末尾的0；</p>
        <p>属性值'0'后面不要加单位；</p>
        <p>同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照右边的写法；</p>
        <p>无前缀的标准属性应该写在有前缀的属性后面；</p>
        <p>不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；</p>
        <p>不要在一个文件里出现两个相同的规则；</p>
        <p>用 <code>border: 0;</code> 代替 <code>border: none;</code>；</p>
        <p>选择器不要超过4层（在scss中如果超过4层应该考虑用嵌套的方式来写）；</p>
        <p>发布的代码中不要有 <code>@import</code>；</p>
        <p>尽量少用'*'选择器。</p>
    </div>
    <div class="col">
        {% highlight css %}{% include css/miscellaneous.css %}{% endhighlight %}
    </div>
</div>
